<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%" top="5vh" @close.native="cancel" :close-on-click-modal="false">
      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="140px">
        <el-form-item label="共享资源名称：" prop="title">
          <el-input v-model="form.title" placeholder="请输入" :disabled="isLook == 'look'" />
        </el-form-item>
        <el-form-item prop="need">
          <template slot="label">
            <span>共享使用需求</span>
            <el-tooltip class="item" effect="dark" content="需要设施仪器管理员预先准备的事项，如样品名称、规格、数量等" placement="top">
              <i class="el-icon-question" style="color:#2c68ff" />
            </el-tooltip>
            <span>:</span>
          </template>
          <el-input v-model="form.need" placeholder="请输入" type="textarea" rows="3" :disabled="isLook == 'look'" />
        </el-form-item>
        <el-form-item prop="name">
          <template slot="label">
            <span>课题(任务)名称</span>
            <el-tooltip class="item" effect="dark" content="用户利用共享资源所支撑的课题名称" placement="top">
              <i class="el-icon-question" style="color:#2c68ff" />
            </el-tooltip>
            <span>:</span>
          </template>
          <el-input v-model="form.name" placeholder="请输入" :disabled="isLook == 'look'" />
        </el-form-item>
        <el-form-item label="课题(任务)性质：" prop="property">
          <el-radio-group v-model="form.property" :disabled="isLook == 'look'">
            <el-radio label="科研性质" name="科研性质"></el-radio>
            <el-radio label="非科研性质" name="非科研性质"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="预约起始时间：" prop="startTime">
          <el-date-picker style="width:100%" v-model="form.startTime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"
            :disabled="isLook == 'look'">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="预约结束时间：" prop="endTime">
          <el-date-picker style="width:100%" v-model="form.endTime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"
            :disabled="isLook == 'look'">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="申请人：" prop="applyName">
          <el-input v-model="form.applyName" placeholder="请输入" :disabled="isLook == 'look'" />
        </el-form-item>
        <el-form-item label="申请人电话：" prop="applyPhone">
          <el-input v-model="form.applyPhone" placeholder="请输入" :disabled="isLook == 'look'" />
        </el-form-item>
        <el-form-item label="申请人单位：" prop="companyName">
          <el-input v-model="form.companyName" placeholder="请输入申请人单位" :disabled="isLook == 'look'" />
        </el-form-item>
        <el-form-item label="预约结果：" prop="answer" v-if="isLook !== 'add'">
          <el-radio-group v-model="form.answer" :disabled="isLook == 'look'">
            <el-radio label="受理" name="受理"></el-radio>
            <el-radio label="不受理" name="不受理"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" v-if="isLook !== 'look'">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addAppointment,
  updateAppointment
} from '@/api/yqgx/appointment'
export default {
  data() {
    return {
      dialogVisible: false,
      isLook: '',
      accept: '*',
      title: '',
      form: {
        title: '',
        need: '',
        name: '',
        property: '',
        startTime: '',
        endTime: '',
        applyName: '',
        applyPhone: '',
        companyName: '',
        answer: ''
      },
      facilityType: ['政策法规', '管理制度'],
      file: null,
      rules: {
        title: [
          { required: true, message: '不能为空！', trigger: 'blur' }
        ],
        need: [{ required: true, message: '不能为空！', trigger: 'blur' }],
        name: [
          { required: true, message: '不能为空！', trigger: 'blur' }
        ],
        property: [
          { required: true, message: '不能为空！', trigger: 'blur' }
        ],
        startTime: [
          { required: true, message: '不能为空！', trigger: 'blur' }
        ],
        endTime: [
          { required: true, message: '不能为空！', trigger: 'blur' }
        ],
        applyName: [
          { required: true, message: '不能为空！', trigger: 'blur' }
        ],
        applyPhone: [
          { required: true, message: '不能为空！', trigger: 'blur' }
        ],
        companyName: [
          { required: true, message: '不能为空！', trigger: 'blur' }
        ],
      }
    }
  },
  computed: {
    userAuth() {
      return localStorage.getItem('userInfo')
        ? JSON.parse(localStorage.getItem('userInfo'))[0]
        : {
          "userId": 1299,
          "userName": "admin",
          "userRealName": "管理员",
          "userEmail": null,
          "deptName": null,
          "createBy": "admin",
          "createTime": "2024-01-02 21:39:11",
          "departmentName": "",
          "departmentId": null,
          "selectFlag": true,
          "userHeadPath": null,
          "userPhone": 18702348729,
          "enableFlag": "y",
          "roleName": "平台管理员"
        }
    }
  },
  created() { },
  methods: {
    show(obj) {
      console.log('%c [ obj ]-148', 'font-size:13px; background:pink; color:#bf2c9f;', obj)
      this.dialogVisible = true
      this.title = obj.title
      this.isLook = obj.isLook
      if (obj.isLook == 'add') {
        this.form.title = obj.data.title
        this.form.applyName = this.userAuth.userRealName
        this.form.applyPhone = this.userAuth.userPhone
        this.form.companyName = this.userAuth.departmentName
        this.form.property = '科研性质'
      } else {
        this.form = Object.assign(obj.data)
      }
    },
    submitForm() {
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          if (this.form.id) {
            updateAppointment(this.form).then(() => {
              this.cancel()
            })
          } else {
            addAppointment(this.form).then(() => {
              this.cancel()
            })
          }
        } else {
          return false
        }
      })
    },
    cancel() {
      this.form = this.$options.data().form
      this.$refs.ruleForm.clearValidate()
      this.dialogVisible = false
      this.isLook = false
      this.file = null
      this.$emit('close')
    },
    handleChange(file) {
      this.file = file.raw
      this.form.fileName = file.name
    },
    // 多次上传覆盖
    handleExceed(file) {
      console.log('[ file ] >', file)
      this.$refs.uploadRef.clearFiles()
      // this.handleChange(file[0])
      this.file = file[0]
      this.form.fileName = file[0].name
    },
    downloadLink(item) {
      this.downloadByUrl(item.fileName, item.filePath)
    },
    closeFile() {
      this.file = null
      this.$refs.uploadRef.clearFiles()
    }
  }
}
</script>

<style lang="less" scoped>
  :deep(.el-table .cell) {
    font-size: 16px;
  }

  :deep(.el-table th > .cell) {
    font-size: 18px;
  }
</style>
